<template>
	<div class="info">
		<div class="header">
			<i class="prefix"></i>
			<span>系统运行时间</span>
			<i class="surfix"></i>
		</div>
		<div class="time">
			<div class="num">{{timeStr.day}}</div><span>天</span>
			<div class="num">{{timeStr.hour}}</div><span>时</span>
			<div class="num">{{timeStr.min}}</div><span>分</span>
			<div class="num">{{timeStr.sec}}</div><span>秒</span>
		</div>
		<div class="device">
			<div class="item">
				<i class="icon icon-device--1"></i>
				<div class="rt">
					<div class="num green">{{deviceOnline==''?0:deviceOnline}}</div>
					<div class="name green">传感器在线</div>
				</div>
			</div>
			<div class="item">
				<i class="icon icon-device--2"></i>
				<div class="rt">
					<div class="num dusty-blue">{{deviceService==''?0:deviceService}}</div>
					<div class="name dusty-blue">传感器维护</div>
				</div>
			</div>
			<div class="item">
				<i class="icon icon-device--3"></i>
				<div class="rt">
					<div class="num gray">{{deviceOffline==''?0:deviceOffline}}</div>
					<div class="name gray">传感器离线</div>
				</div>
			</div>
		</div>
		<div class="status">
			<div class="item">
				<div class="num">{{threeLevel==''?0:threeLevel}}</div>
				<dot
					class="fz-14"
					:width="12"
					color="#FF0000"
				>三级预警</dot>
			</div>
			<div class="item">
				<div class="num">{{twoLevel==''?0:twoLevel}}</div>
				<dot
					class="fz-14"
					:width="12"
					color="#FF8000"
				>二级预警</dot>
			</div>
			<div class="item">
				<div class="num">{{firstLevel==''?0:firstLevel}}</div>
				<dot
					class="fz-14"
					:width="12"
					color="#3492FC"
				>一级预警</dot>
			</div>
		</div>
	</div>
</template>

<script>
	import dot from "./dot";
  import { indexAlarmSum } from "@/api/slope/alarm";
  import { indexDeviceSum } from "@/api/slope/device";
  import {
    getSysRunTime
  } from "@/api/page/index.js";
  let timeI = null;
	export default {
		name: "info",
		components: { dot },
		props: {
			info: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
        firstLevel:"",
        twoLevel:"",
        threeLevel:"",
        deviceOnline:"",
        deviceService:"",
        deviceOffline:"",
				timeStr: {
					day: "",
					hour: "",
					min: "",
					sec: ""
				},
			};
		},
		watch: {},
		methods: {
			setTimeStr(startTime) {
				clearInterval(timeI);
				// 系统开始运行的时间
				let now = Date.now();
				let dis = now - startTime;
				this.timeStr = this.formatDistime(dis)
				timeI = setInterval(() => {
					dis += 1000;
					this.timeStr = this.formatDistime(dis)
				}, 1000);
			},
			formatDistime(n) {
				return {
					day: Math.floor(n / (24 * 60 * 60 * 1000)),
					hour: Math.floor(n / (60 * 60 * 1000)) % 24,
					min: this.pd0(Math.floor(n / (60 * 1000)) % 60),
					sec: this.pd0(Math.floor(n / 1000) % 60)
				};
			},
			pd0(n) {
				return n < 10 ? "0" + n : n;
			},
			async getData() {
				let id = this.route.params.id;
				if (!id) return;
				this.loading = true;
				this.list = await Api.OrderDetail.accessory({
					data: {
						correlationId
					}
				});
				this.loading = false;
			},
      async getAlarmNum() {
        indexAlarmSum().then(res => {
          for (let i=0;i<res.data.length;i++){
            let level = res.data[i].alarmLevel;
            if(level ==1 ){
              this.firstLevel =  res.data[i].num;
            }else if (level ==2) {
              this.twoLevel =  res.data[i].num;
            }else if (level ==3) {
              this.threeLevel =  res.data[i].num;
            }
          }
        }).catch((error)=> {
          console.log(error);
        });
      },
      async getDeviceNum() {
        indexDeviceSum().then(res => {
          for (let i=0;i<res.data.length;i++){
            let state = res.data[i].state;
            if(state ==1 ){
              this.deviceOnline =  res.data[i].num;
            }else if (state ==2) {
              this.deviceService =  res.data[i].num;
            }else if (state ==0) {
              this.deviceOffline =  res.data[i].num;
            }
          }
        }).catch((error)=> {
          console.log(error);
        });
      },
      getSysRunTime(){
        getSysRunTime().then(response => {
          let time = new Date(response.data.runtime).getTime();
          this.setTimeStr(time);
        }).catch((error)=> {
          console.log(error);
        });
      },
		},
		created() {
      this.getAlarmNum();
      this.getDeviceNum();
      this.getSysRunTime();
      //this.getData()
		},
		mounted() {
			this.setTimeStr();
		},
		beforeDestroy() {
			clearInterval(timeI);
		}
	};
</script>
<style lang="scss" scoped>
	@import "~@/assets/styles/mixin.scss";
	@import "~@/assets/styles/variables.scss";

	.green {
		color: #64c797 !important;
	}
	.dusty-blue {
		color: rgb(178, 203, 231) !important;
	}
	.gray {
		color: rgb(177, 177, 177) !important;
	}
	.svg-icon {
		fill: currentColor;
	}
	.info {
		background-color: #fff;
		border: 1px solid #eee;
		padding: 5px;
		border-radius: 4px;
		padding: 0 $dsMain $dsMain;
		margin-top: $dsMain;
		.header {
			text-align: center;
			font-size: 14px;
			line-height: 40px;
			color: #323232;
			flex-shrink: 0;
			@include flex(center, center);
			i {
				display: block;
				width: 78px;
				height: 5px;
				background-repeat: no-repeat;
				background-size: contain;
				margin: 0 5px;
				&.prefix {
					background-image: url("~@/assets/image/icons/a-l.png");
				}
				&.surfix {
					background-image: url("~@/assets/image/icons/a-r.png");
				}
			}
		}
		.time {
			@include flex(space-between, center);
			// color: #14d214;
			color: rgb(111, 178, 251);
			font-size: 16px;
			.num {
				width: 49px;
				height: 44px;
				line-height: 44px;
				font-size: 26px;
				// font-weight: bold;
				color: #fff;
				background-image: url("~@/assets/image/icons/num.png");
				background-size: contain;
				background-repeat: no-repeat;
				text-align: center;
			}
		}
		.device {
			@include flex(space-between, center);
			margin: 16px 0;
			.item {
				@include flex(space-between, center);
			}
			.num {
				color: #2e374d;
				font-size: 16px;
			}
			.name {
				color: #b9b9b9;
				font-size: 12px;
			}
			.icon {
				display: block;
				width: 30px;
				height: 30px;
				background-repeat: no-repeat;
				background-position: 0 center;
				background-size: auto 98%;
			}
			.icon-device--1 {
				background-image: url("~@/assets/image/icons/device_normal.png");
				// background-image: url("~@/assets/image/icons/device-1.png");
			}
			.icon-device--2 {
				background-image: url("~@/assets/image/icons/device_maintain.png");
				// background-image: url("~@/assets/image/icons/device-2.png");
			}
			.icon-device--3 {
				background-image: url("~@/assets/image/icons/device_off-line.png");
				// background-image: url("~@/assets/image/icons/device-3.png");
			}
		}
		.status {
			@include flex(space-between, center);
			.num {
				color: #2e374d;
				font-size: 30px;
				text-align: center;
			}
			.name {
				color: #b9b9b9;
				font-size: 12px;
			}
		}
	}
</style>
